<!-- 待使用订单 -->
<template>
	<view class="container">
		<view class="order_header">
			<uni-nav-bar left-icon="left" dark @clickLeft="back" :border="false" :background-color="transparentColor" status-bar="" title="待使用订单" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 主体内容区域 -->
		<view class="order_main">
			<!-- 核销码区域 -->
			<view class="order_main_QR_code">
				<view class="order_main_QR_code_text">
					核销码：WE343235V
				</view>
				<view class="order_main_QR_code_img">
					<img src="/static/QR-code.png" />
				</view>
			</view>
			<!-- 订单信息区域 -->
			<view class="order_info">
				<view class="order_info_top">
					<view class="order_info_top_title">
						订单信息
					</view>
					<view class="order_info_top_status">
						待使用
					</view>
				</view>
				<view class="order_info_bottom">
					<view class="order_info_bottom_title">
						订单号：121212112487878
					</view>
					<view class="order_info_bottom_title">
						服务项目：车辆保养
					</view>
					<view class="order_info_bottom_title">
						服务门店：大宝车辆维修店
						<img src="/static/plane@3x.png" />
					</view>
					<view class="order_info_bottom_title">
						下单时间：2023-03-0817:40
					</view>
					<view class="order_info_bottom_title">
						预约时间：2023-03-0917:40
					</view>
					<view class="order_info_bottom_title">
						车辆：奔驰FWE4/豫A98FHJ
					</view>
					<view class="order_info_bottom_title">
						备注：
					</view>
				</view>
			</view>
			<!-- 订单详情区域 -->
			<view class="order_details">
				<view class="order_details_top">
					<view class="order_details_top_title">
						订单详情
					</view>
				</view>
				<view class="order_details_main">
					<view class="order_details_main_line_one">
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								车辆精洗
							</view>
							<view class="order_details_main_money">
								￥39.90
							</view>
						</view>
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								车辆附加费用
							</view>
							<view class="order_details_main_money">
								0
							</view>
						</view>
					</view>
					<view class="order_details_main_line_two">
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								原价
							</view>
							<view class="order_details_main_money">
								￥59.90
							</view>
						</view>
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								店家优惠
							</view>
							<view class="order_details_main_money">
								-￥20
							</view>
						</view>
					</view>
					<view class="order_details_main_line_three">
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								优惠券
							</view>
							<view class="order_details_main_money">
								-￥10
							</view>
						</view>
					</view>
					<view class="order_details_bottom">
						<view class="order_details_main_line">
							<view class="order_details_main_title">
								支付金额
							</view>
							<view class="order_details_main_money">
								￥29.9
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部客服区域 -->
		<view class="order_service">
			<view class="order_service_left">
				<view class="order_service_left_icon">
					<img src="/static/客服@2x.png" />
				</view>
				<view class="order_service_left_text">
					联系客服
				</view>
			</view>
			<view class="order_service_right">
				<view class="order_service_right_button">
					再来一单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				status: '-1',
				list: [
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
					{status: '4'},
					{status: '5'},
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
				],
			}
		},
		methods: {
			optionChecked(val) {
				this.status = val
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
.order_header {
	height: 400rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* 主体内容区域开始 */
.order_main {
	padding: 0 20rpx;
	position: relative;
	top: -270rpx;
}
.order_info,.order_details {
	background-color: #fff;
	padding: 0 20rpx;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}
/* 核销码区域开始 */
.order_main_QR_code {
	background-color: #fff;
	padding: 20rpx 0 40rpx;
	font-size: 32rpx;
	text-align: center;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}
.order_main_QR_code_text {
	height: 88rpx;
	line-height: 88rpx;
}
.order_main_QR_code_img>img {
	width: 200rpx;
	height: 200rpx;
}
/* 核销码区域结束 */
/* 卡片顶部区域开始 */
.order_info_top,.order_details_top {
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 6rpx solid #F7F7F7;
}
.order_info_top_title,.order_details_top_title {
	font-size: 32rpx;
}
.order_info_top_status {
	color: #FF6135;
	font-size: 26rpx;
}
/* 卡片顶部区域结束 */
/* 卡片内容区域开始 */
.order_info_bottom {
	padding: 10rpx 20rpx;
	font-size: 26rpx;
}
.order_info_bottom>view {
	height: 60rpx;
	line-height: 60rpx;
}
.order_info_bottom_title>img {
	width: 26rpx;
	height: 26rpx;
	vertical-align: middle;
	margin-left: 20rpx;
}
/* 卡片内容区域结束 */
/* 卡片底部区域开始 */
.order_details_main {
	padding: 10rpx 20rpx;
	padding-bottom: 0;
	font-size: 28rpx;
}
.order_details_main_line {
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
}
.order_details_main_line_one,.order_details_main_line_two {
	border-bottom: 2rpx solid #F7F7F7;
}
.order_details_main_line_two>view:nth-child(2)>.order_details_main_money {
	color: #FF6135;
}
.order_details_main_line_three {
	border-bottom: 6rpx solid #F7F7F7;
}
.order_details_main_line_three>view>.order_details_main_money {
	color: #FF6135;
}
.order_details_bottom>view>.order_details_main_money {
	color: #21CA59;
}
/* 卡片底部区域结束 */
/* 主体内容区域结束 */
/* 底部客服区域开始 */
.order_service {
	width: 710rpx;
	height: 66rpx;
	line-height: 66rpx;
	padding: 20rpx 20rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
}
.order_service_left {
	width: 200rpx;
	display: flex;
}
.order_service_left_icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 16rpx;
}
.order_service_left_icon>img {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
	margin-top: -4rpx;
}
.order_service_left_text {
	font-size: 24rpx;
}

.order_service_right {
	height: 60rpx;
	line-height: 60rpx;
	width: 180rpx;
	font-size: 28rpx;
	text-align: center;
	background: linear-gradient(to right,#3789FF,#0662E6);
	color: #fff;
	border-radius: 30rpx;
}
/* 底部客服区域结束 */
</style>
